<template>
  <view class="flex-table">
    <view class="flex-tr">
      <view class="flex-td--label">申请单位</view>
      <view class="flex-td--value flex-center">{{ ticket.applyUnitName }}</view>
      <view class="flex-td--label">作业申请时间</view>
      <view class="flex-td--value flex-center">{{
        $u.timeFormat(ticket.createTime, 'yyyy 年 mm 月 dd 日 hh 时 MM 分')
      }}</view>
    </view>
    <view class="flex-tr">
      <view class="flex-td--label">作业地点</view>
      <view class="flex-td--value flex-center">{{ detail.workLocation }}</view>
      <view class="flex-td--label">作业内容</view>
      <view class="flex-td--value flex-center">{{ ticket.workContent }}</view>
    </view>
    <view class="flex-tr">
      <view class="flex-td--label">电源接入点</view>
      <view class="flex-td--value flex-center">{{ detail.powerAP }}</view>
      <view class="flex-td--label">许可用电功率</view>
      <view class="flex-td--value flex-center">{{ detail.permissionPower }}KW</view>
      <view class="flex-td--label">工作电压</view>
      <view class="flex-td--value flex-center">{{ detail.workVoltage }}V</view>
    </view>
    <view class="flex-tr">
      <view class="flex-td--label">用电设备名称</view>
      <view class="flex-td--value flex-center">{{ detail.device }}</view>
      <view class="flex-td--label">额定功率</view>
      <view class="flex-td--value flex-center">{{ detail.ratedPower }}KW</view>
      <view class="flex-td--label">监护人</view>
      <view class="flex-td--value" style="display: block">
        <image
          v-for="imgItem in guardianSignatures"
          :key="imgItem"
          :src="`${staticUrl}${imgItem}`"
          mode="aspectFill"
          class="signature__img"
          @click="handlePreviewImage(`${staticUrl}${imgItem}`, guardianSignatures)"
        ></image>
      </view>
      <view class="flex-td--label">用电人</view>
      <view class="flex-td--value" style="display: block">
        <image
          v-for="imgItem in operatorAcceptConfessionsSignatures"
          :key="imgItem"
          :src="`${staticUrl}${imgItem}`"
          mode="aspectFill"
          class="signature__img"
          @click="handlePreviewImage(`${staticUrl}${imgItem}`, operatorAcceptConfessionsSignatures)"
        ></image>
      </view>
    </view>

    <view class="flex-tr">
      <view class="flex-td--label">作业人</view>
      <view class="flex-td--value" style="display: block">
        <image
          v-for="imgItem in preelectricianSignatures"
          :key="imgItem"
          :src="`${staticUrl}${imgItem}`"
          mode="aspectFill"
          class="signature__img"
          @click="handlePreviewImage(`${staticUrl}${imgItem}`, preelectricianSignatures)"
        ></image>
      </view>
      <view class="flex-td--label">电工证号</view>
      <view class="flex-td--value flex-center">
        {{ workCertificates }}
      </view>
    </view>

    <view class="flex-tr">
      <view class="flex-td--label">作业负责人</view>
      <view class="flex-td--value" style="display: block">
        <image
          v-for="imgItem in operationManagerSignatures"
          :key="imgItem"
          :src="`${staticUrl}${imgItem}`"
          mode="aspectFill"
          class="signature__img"
          @click="handlePreviewImage(`${staticUrl}${imgItem}`, operationManagerSignatures)"
        ></image>
      </view>
      <view class="flex-td--label">电工证号</view>
      <view class="flex-td--value flex-center">
        {{ workPrincipalCertificates }}
      </view>
    </view>

    <view class="flex-tr">
      <view class="flex-td--label">关联的其他特殊作业及安全作业票编号</view>
      <view class="flex-td--value flex-center">{{ relevanceTicketLabel }}</view>
    </view>
    <view class="flex-tr">
      <view class="flex-td--label">风险辨识结果</view>
      <view class="flex-td--value flex-center">{{ ticket.riskIdentificationResultLabel }}</view>
    </view>
    <view class="flex-tr">
      <view class="flex-td--value flex-center" style="background: #f1f1f1; border-left: 1px solid #124264">
        可燃气体分析（运行的生产装置、罐区和具有火灾爆炸危险场所）
      </view>
    </view>
    <electric-analyse-table :ticket-id="ticketId" />
    <view class="flex-tr">
      <view class="flex-td--label">作业实施时间</view>
      <view class="flex-td--value flex-center">{{ actualDateLabel }}</view>
    </view>
  </view>
</template>
<script>
import ticketTableMixin from './ticketTableMixin'
import ElectricAnalyseTable from './ElectricAnalyseTable.vue'
import FireAnalyseTable from '@/pages/jobSlip/detail/components/tickets/FireAnalyseTable.vue'
export default {
  components: { FireAnalyseTable, ElectricAnalyseTable },
  mixins: [ticketTableMixin],
  props: {
    ticketId: [Number, String],
    detail: {
      type: Object,
      default: () => ({})
    },
    inspect: {
      type: Object,
      default: () => ({})
    },
    signatures: {
      type: Array,
      default: () => []
    },
    ticket: {
      type: Object,
      default: () => ({})
    },
    relevanceTicketLabel: String,
    riskIdentificationResult: String,
    actualDateLabel: String
  },
  computed: {
    workPrincipalCertificates() {
      if (!this.detail.workPrincipalCertificates) {
        return ''
      }
      return this.detail.workPrincipalCertificates.map((item) => `${item.name}(${item.qualityNumber})`).join('，')
    },
    workCertificates() {
      if (!this.detail.workCertificates) {
        return ''
      }
      return this.detail.workCertificates.map((item) => `${item.name}(${item.qualityNumber})`).join('，')
    }
  }
}
</script>
<style scoped lang="scss">
@import './style.scss';
</style>
